import React, { useState } from 'react'
// import { useNavigate } from 'react-router-dom';
import { add } from '../../services/order'
import { Form, Input, Button, Modal, Radio, message, Upload, DatePicker } from 'antd'
// import {getOne,login} from '../services/user'
import { useSelector, useDispatch } from 'react-redux'
import { setIsModalVisible } from '../../store/slices/orderSlice'
import {
  PlusOutlined,
  LoadingOutlined
} from '@ant-design/icons'
import { url } from '../../services'

export default function Add({ show }) {
  // const [isModalVisible, setIsModalVisible] = useState(false);
  const [form] = Form.useForm()
  // let navigate = useNavigate()

  const getBase64 = (img, callback) => {
    const reader = new FileReader()
    reader.addEventListener('load', () => callback(reader.result))
    reader.readAsDataURL(img)
  }

  const beforeUpload = file => {
    const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png'

    if (!isJpgOrPng) {
      message.error('You can only upload JPG/PNG file!')
    }

    const isLt2M = file.size / 1024 / 1024 < 2

    if (!isLt2M) {
      message.error('Image must smaller than 2MB!')
    }

    return isJpgOrPng && isLt2M
  }

  const [loading, setLoading] = useState(false)
  const [imageUrl, setImageUrl] = useState()

  const handleChange = info => {
    if (info.file.status === 'uploading') {
      setLoading(true)
      return
    }

    if (info.file.status === 'done') {
      // Get this url from response in real world.
      getBase64(info.file.originFileObj, url => {
        setLoading(false)
        setImageUrl(url)
      })
    }
  }

  const uploadButton = (
    <div>
      {loading ? <LoadingOutlined /> : <PlusOutlined />}
      <div
        style={{
          marginTop: 8
        }}
      >
        Upload
      </div>
    </div>
  )

  let isModalVisible = useSelector(state => state.order.isModalVisible)
  let dispatch = useDispatch()
  const showModal = () => {
    console.log('a')
    dispatch(setIsModalVisible(true))
  }
  const handleOk = async () => {
    let values = form.getFieldsValue()
    console.log(values)
    console.log(values.time.format('YYYY-MM-DD'));
    await add({
      ...values,
      time: values.time.format('YYYY-MM-DD'),
      shopImg: values.shopImg.fileList[0].response.filename,
      shopData: [{
        name: values.name,
        price: values.price,
        types: values.types,
        total: values.total,
        shopImg: values.shopImg.file.name,
        isStatue: values.isStatue,
        sale: values.sale,
      }]
    })
    show();
    dispatch(setIsModalVisible(false));
  }

  const handleCancel = () => {
    dispatch(setIsModalVisible(false))
  }
  return (
    <div>
      <Button type='primary' onClick={showModal}>
        新增订单
      </Button>
      <Modal
        title='新增学生'
        visible={isModalVisible}
        onOk={handleOk}
        onCancel={handleCancel}
      >
        <Form
          form={form}
          labelCol={{
            span: 6
          }}
          wrapperCol={{
            span: 16
          }}
          name='basic'
          initialValues={{
            remember: true
          }}
          autoComplete='off'
        >
          <Form.Item
            label='下单时间'
            name='time'
            rules={[
              {
                required: true,
                message: '请输入下单时间'
              }
            ]}
            hasFeedback
          >
            <DatePicker />
          </Form.Item>
          <Form.Item name='state' label='是否删除'>
            <Radio.Group>
              <Radio value='是'> 是 </Radio> <Radio value='否'> 否 </Radio>{' '}
            </Radio.Group>
          </Form.Item>
          <Form.Item
            label='商品名'
            name='name'
            rules={[
              {
                required: true,
                message: '请输入商品名'
              }
            ]}
            hasFeedback
          >
            <Input />
          </Form.Item>
          <Form.Item
            label='价格'
            name='price'
            rules={[
              {
                required: true,
                message: '请输入价格'
              }
            ]}
            hasFeedback
          >
            <Input />
          </Form.Item>
          <Form.Item
            label='类型'
            name='types'
            rules={[
              {
                required: true,
                message: '请输入类型'
              }
            ]}
            hasFeedback
          >
            <Input />
          </Form.Item>
          <Form.Item
            label='总数'
            name='total'
            rules={[
              {
                required: true,
                message: '请输入商品总数'
              }
            ]}
            hasFeedback
          >
            <Input />
          </Form.Item>
          <Form.Item label='商品图片' name='shopImg' hasFeedback>
            <Upload
              name='file'
              listType='picture-card'
              className='avatar-uploader'
              showUploadList={false}
              action={url + '/upload'}
              beforeUpload={beforeUpload}
              onChange={handleChange}
            >
              {imageUrl ? (
                <img
                  src={imageUrl}
                  alt='avatar'
                  style={{
                    width: '100%'
                  }}
                />
              ) : (
                uploadButton
              )}
            </Upload>
          </Form.Item>
          <Form.Item name='isStatue' label='是否下架'>
            <Radio.Group>
              <Radio value='true'> 下架 </Radio> <Radio value='false'> 上架 </Radio>{' '}
            </Radio.Group>
          </Form.Item>
          <Form.Item
            label='已卖'
            name='sale'
            rules={[
              {
                required: true,
                message: '请输入已卖的数量'
              }
            ]}
            hasFeedback
          >
            <Input />
          </Form.Item>
          <Form.Item
            label='用户ID'
            name='users'
            rules={[
              {
                required: true,
                message: '请输入用户ID'
              }
            ]}
            hasFeedback
          >
            <Input />
          </Form.Item>
        </Form>
      </Modal>
    </div>
  )
}
